const p_join = {
    name: "p_join",
    template: `
        <div class="p_join">
            <ul class="joinTab">
                <template v-for="(item,index) in list">
                    <li 
                        :key="index"
                        :class="joinCurrent === index ? 'active' : ''" 
                        @click="joinCurrent = index"
                    >
                        <a :href="'#' + item.id">
                            {{ item.title.title }}
                        </a>
                    </li>
                </template>
            </ul>
            
            <div v-for="(item,index) in list" :key="index" :id="item.id">
                <c_title :title="item.title"></c_title>
                <c_rich :rich="item.context"></c_rich>
            </div>

            <div class="bossEmail">
                <a href="https://www.zhipin.com/gongsi/33c594c5b1bfc6931HFy2d0~.html?ka=search_rcmd_company_name_33c594c5b1bfc6931HFy2d0~_custompage" target="__blank">
                    <img src="../images/email.png" class="emailImage">
                    <span>人事邮箱:{{ email }}</span>
                    <img src="../images/boss.png" class="bossImage">
                </a>
            </div>
            
            <c_gasbag id="news" text="新闻动态"></c_gasbag>
        </div>
    `,
    components: {
        c_title: {
            name: "c_title",
            template: `
                <div class="c_title">
                    <div class="c_title_text">{{ title.title }}</div>
                    <div class="c_title_right">
                        <div>
                            <span class="c_title_address">{{ title.address }}</span>
                            <img :src="title.image">
                        </div>
                        <p class="publicity">{{ title.publicity }}</p>
                    </div>
                </div>
            `,
            props: ["title"]
        }
    },
    data() {
        return {
            joinCurrent: 0,
            email: "jolie@alice.bj.cn",
            list: [
                {
                    title: {
                        title: "创意策划",
                        address: "工作地点：北京",
                        image: "../images/beijing.png",
                        publicity: "CREATIVE PLANNING"
                    },
                    id: "CREATIVE",
                    context: "",
                    serverId: "4"
                },
                {
                    title: {
                        title: "客户经理",
                        address: "工作地点：上海",
                        image: "../images/shanghai.png",
                        publicity: "ACCOUNT MANAGER"
                    },
                    id: "ACCOUNT",
                    context: "",
                    serverId: "5"
                },
                {
                    title: {
                        title: "医学编辑",
                        address: "工作地点：北京",
                        image: "../images/beijing.png",
                        publicity: "MEDICAL EDITOR"
                    },
                    id: "MEDICAL",
                    context: "",
                    serverId: "6"
                },
                {
                    title: {
                        title: "项目助理",
                        address: "工作地点：北京、上海、广州、成都、昆明",
                        image: "",
                        publicity: "PROJECT ASSISTANT"
                    },
                    id: "PROJECT",
                    context: "",
                    serverId: "13"
                }
            ]
        }
    },
    created() {
        sendRequest("list", {
            cate_id: 4,
            limit: 4,
            sort: 0
        }).then(res => {
            const { success, data } = res;
            if (success) {
                function find(id) {
                    return data.list.filter(ev => ev.id == id)[0] || {};
                }
                this.list.map(item => {
                    item.context = find(item.serverId).articleInfo.content;
                })
            }
        })
    },
    mounted() {
        this.autoCurrent();
        window.addEventListener("scroll", this.autoCurrent);
    },
    methods: {
        autoCurrent() {
            this.list.map((item, index) => {
                const pageScrollTop = window.scrollY;
                const elTop = document.querySelector(`#${item.id}`).offsetTop;
                if (pageScrollTop - elTop > 300 && this.joinCurrent <= index) {
                    this.joinCurrent = index;
                } else if (this.joinCurrent > index) {
                    this.joinCurrent = index;
                }
            })
        }
    }
}
Vue.component("p_join", p_join);